<template>
  <view class="container">
    <!-- 项目列表 -->
    <view 
      v-for="(item, index) in projectList" 
      :key="index" 
      class="project-item"
      @click="goDetail(item.qingdao_project_id)"
    >
      <!-- 项目标题 -->
      <view class="title">{{ item.title }}</view>
      
      <!-- 公司信息 -->
      <view class="company">{{ item.company }}</view>
      
      <!-- 时间信息 -->
      <view class="time-range">
        {{ formatDate(item.starttime) }} - {{ formatDate(item.endtime) }}
      </view>
      
      <!-- 状态标签 -->
      <view class="status-tag" :class="'status-' + item.status">
        {{ statusText[item.status] }}
      </view>
    </view>
  </view>
</template>

<script>
import { qingdaoProject } from "../../utils/getDate.js"

export default {
  data() {
    return {
      projectList: [],
      statusText: {
        0: '进行中',
        1: '已完成',
        2: '已延期'
      }
    }
  },
  onLoad() {
    this.onqingdaoProject()
  },
  methods: {
    // 获取项目列表
    onqingdaoProject() {
      let data = {
        userId: uni.getStorageSync("userinfo").id
      }
      qingdaoProject(data).then(res => {
        if (res.state === 'ok') {
          this.projectList = res.data
        }
      })
    },

    // 跳转详情页
    goDetail(qingdao_project_id) {
      uni.navigateTo({
        url: `/pages/student/trainingList?id=${qingdao_project_id}`
      })
    },

    // 日期格式化
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.project-item {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  position: relative;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  transition: all 0.3s;

  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  .title {
    font-size: 34rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 15rpx;
  }

  .company {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }

  .time-range {
    font-size: 24rpx;
    color: #888;
  }

  .status-tag {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    font-size: 24rpx;
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    
    &.status-0 {
      background: #e8f4ff;
      color: #2d8cf0;
    }
    
    &.status-1 {
      background: #e8ffe8;
      color: #09bb07;
    }
    
    &.status-2 {
      background: #fff5e8;
      color: #ff9900;
    }
  }
}
</style>